<template>
	<view class="">
		<u-navbar :background="background" :customBack="logOut" back-icon-color="#fff" :back-text-style="backTextStyle"
			title-color="#fff" :border-bottom="false" title="AI监控中心" back-text="退出登录" back-icon-size="28"
			back-icon-name="setting">
		</u-navbar>
		<view class="top">
			<view class="dis-flex flex-x-between flex-y-center">
				<view class="dis-flex flex-y-center">
					<view class="dis-flex flex-y-center">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/imags/home/icon3.png" mode="" />
					</view>
					<view class="col-f f-36 m-l-10 letter-spacing3">
						AI盒子
					</view>
				</view>
				<view class=" dis-flex flex-x-between">
					<view class="dis-flex flex-y-center">
						<view class="line">

						</view>
					</view>
					<view class="text1">
						{{date}}
					</view>
					<view class="dis-flex flex-y-center">
						<view class="line">

						</view>
					</view>
				</view>
				<view class="dis-flex flex-y-center">
					<view class="dis-flex flex-y-center">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/imags/home/icon4.png" mode="" />
					</view>
					<view class="col-f f-36 letter-spacing3 m-l-10">
						摄像头
					</view>
				</view>
			</view>
			<view class="dis-flex flex-x-between flex-y-center m-top15">
				<view class="">
					<view class="">
						<text class="text2 letter-spacing3">在线：</text><text class="text3">{{boxOnLine}}</text>
					</view>
					<view class="">
						<text class="text2 letter-spacing3">离线：</text><text class="text3">{{boxOffLine}}</text>
					</view>
				</view>
				<view class="">
					<view class="">
						<text class="text2 letter-spacing3">在线：</text><text class="text3">{{cameraOnLine}}</text>
					</view>
					<view class="">
						<text class="text2 letter-spacing3">离线：</text><text class="text3">{{cameraOffLine}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content-box">
			<view class="li-ht60">
				<text class="f-34 f-w letter-spacing3">我的盒子</text>
			</view>
			<view class="m-top15">
				<uv-scroll-list v-if="boxList.length>0">
					<view class="box-list dis-flex">
						<view class="box1 " v-for="(item,index) in boxList" :key="item.id"
							:style="{border:item.id == checkBoxId ? '1px solid #46ACFF' : '1px solid #fff'}"
							@click="onGetCameraPromptly(item.deviceNumber,item.id)">
							<view class="dis-flex flex-x-between ">
								<view class="">
									<image style="width: 40rpx;height: 40rpx;"
										src="../../../static/imags/tabBar/equipment-icon-active.png" mode=""></image>
								</view>
								<view class="dot" :style="{backgroundColor:item.id == checkBoxId ? '#FBC02D' : ''}">
								</view>
							</view>
							<view class="col-11 oneline-hide f-w f-24 m-top15 letter-spacing3 t-c">
								{{item.name}}
							</view>
						</view>
						<!-- <view v-else class="box2 dis-flex flex-y-center"  v-for="(item,index) in boxList" :key="item.id">
							<view class="col-11 f-24 oneline-hide">
								{{item.name}}
							</view>
							<view class="dot m-l-15">
							
							</view>
						</view> -->
					</view>
				</uv-scroll-list>
				<view class=" dis-flex flex-x-center" v-else>
					<u-empty text="您还没有监控盒子" mode="data"></u-empty>
				</view>
			</view>

			<view class="li-ht60">
				<text class="f-34 f-w letter-spacing3">我的摄像头</text>
			</view>
			<view class="dis-flex camera-list flex-wrap" v-if="cameraList.length>0">
				<view class="camera-item m-top15" v-for="(item,index) in cameraList" :key="item.id">
					<view class="dis-flex flex-x-between">
						<view class="">
							<image style="width: 40rpx;height: 40rpx;" src="../../../static/imags/home/icon5.png"
								mode=""></image>
						</view>
						<view class="dot"
							:style="{backgroundColor:item.status == 0 ? '#B0B0B0' : 'rgba(0, 219, 73, 1)'}">
						</view>
					</view>
					<view class="col-11 oneline-hide f-w f-28 m-top15 letter-spacing3 t-c">
						{{item.cameraName}}
					</view>
				</view>
			</view>
			<view class="dis-flex flex-x-center" style="height: 300rpx;" v-else>
				<u-empty text="该AI盒子还没有监控头" mode="data"></u-empty>
			</view>
		</view>

		<!-- <view class="">
			<play-modal />
		</view> -->

		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" tips="顶部" duration="200" :custom-style="customStyle" :icon-style="iconStyle"
			icon="arrow-up"></u-back-top>

		<!-- 加载动画 -->
		<u-page-loading v-if="loading" />
	</view>
</template>

<script>
	import {
		getbox,
		getCameraPromptly
	} from '@/api/deviceManagement.js'
	import store from '@/store'

	export default {
		components: {},
		data() {
			return {
				loading: false,
				boxList: [],
				cameraList: [],
				loading: false,
				boxOnLine: 0, // 盒子在线 num
				boxOffLine: 0, // 盒子离线 num
				cameraOnLine: 0,
				cameraOffLine: 0,
				date: '',
				checkBoxId: undefined, // 当前选中的盒子id
				background: {
					backgroundColor: '#008CFF',
				},
				backTextStyle: {
					color: '#fff',
					fontSize: '28rpx'
				},
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				},
				customStyle: {
					fontSize: '32rpx',
					color: '#2979ff',
					backgroundColor: '#A0CFFF',
				}
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onLoad() {
			await this.onGetbox()
		},
		created() {
			this.setDate()
		},
		// 监听用户下拉刷新动作
		async onPullDownRefresh() {
			await this.onGetbox()
		},
		methods: {
			logOut() {
				uni.showModal({
					title: '温馨提示',
					content: '您确定要退出登录吗？',
					showCancel: true,
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if (res.confirm) {
							store.dispatch('Logout', )
							uni.reLaunch({ // 关闭所有页面，打开到应用内的某个页面。
								url: `/pages/login/index`
							})
						}
					}
				})
			},
			// 获取监控盒子列表
			onGetbox() {
				return new Promise((resolve, reject) => {
					getbox().then(res => {
						this.boxList = res.data.records
						this.boxOnLine = res.data.records.length
						this.onGetCameraPromptly(res.data.records[0].deviceNumber, res.data.records[0].id)
						resolve(true)
					}).catch((error) => {
						reject(error)
					})
				})
			},
			// 获取摄像头列表
			onGetCameraPromptly(deviceNumber, id) {
				this.checkBoxId = id
				this.loading = true
				getCameraPromptly({
					deviceNumber
				}).then(res => {
					this.cameraList = res.data
					if (res.data.length > 0) {
						res.data.forEach(item => {
							if (item.status == 1) ++this.cameraOnLine
							else ++this.cameraOffLine
						})
					} else {
						this.cameraOnLine = 0
						this.cameraOffLine = 0
					}
				}).finally(() => {
					setTimeout(() => {
						this.loading = false
					}, 500)
					uni.stopPullDownRefresh(); //停止刷新
				})
			},
			setDate() {
				// 获取当前日期
				let currentDate = new Date();

				// 获取月份
				let year = currentDate.getFullYear();

				// 获取月份
				let month = currentDate.getMonth() + 1;

				// 获取日
				let day = currentDate.getDate();

				this.date = `${year}年${month}月${day}日`
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-nav-slot {
		display: flex;
		width: 300rpx;
	}

	.u-nav-slot-right {
		margin-left: 120rpx;
	}


	.top {
		background-color: #008CFF;
		border-radius: 0 0 45rpx 45rpx;
		padding: 10rpx 40rpx 50rpx 40rpx;

		.line {
			width: 50rpx;
			height: 3rpx;
			background-color: rgba(255, 255, 255, 0.5);
		}

		.text1 {
			margin: 0 15rpx;
			font-size: 25rpx;
			color: rgba(255, 255, 255, 0.5);
		}

		.text2 {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 1);
		}

		.text3 {
			font-size: 25rpx;
			color: rgba(255, 255, 255, 1);
		}
	}

	.content-box {
		padding: 20rpx 30rpx;

		.box-list {
			.box1 {
				margin-right: 15rpx;
				width: 200rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-image: url('@/static/imags/home/background1.png');
				background-size: cover;
				/* 设置背景图片撑满整个盒子 */
				background-repeat: no-repeat;
				/* 设置背景图片只展示一次 */
				background-position: center;
				/* 设置背景图片居中显示 */
			}

			.box2 {
				margin-right: 15rpx;
				width: 210rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				background: rgba(235, 238, 242, 1);
			}
		}

		.camera-list {
			.camera-item {
				margin: 15rpx 6rpx 0 6rpx;
				width: 220rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-image: url('@/static/imags/home/background1.png');
				background-size: cover;
				/* 设置背景图片撑满整个盒子 */
				background-repeat: no-repeat;
				/* 设置背景图片只展示一次 */
				background-position: center;
				/* 设置背景图片居中显示 */
			}
		}

		.dot {
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
		}
	}
</style>